﻿@model ElectroSystem.Models.HomeModel           
@{
    ViewBag.Title = "Home Page";
 }

<h2>@ViewBag.Message</h2>
 
<script type="text/javascript">
    function filtercategory() {
        if ($("#ddlCategories option:selected").val() == "") {
            alert("Choose a category to filter by!");
        }
        else {
            var param = {
                categoryID: $("#ddlCategories option:selected").val()
            };

            $.ajax({
                url: '@Url.Action("GetProductsByCategory")',
                type: "POST",
                datatype: "html",
                UpdateTargetId: "divCategoryResult", // The DIV that will contain the partial view
                data: param, // Passing the parameters var
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert("An error has occurred.");
                },
                success: function (data) {
                    $('#divCategoryResult').empty();
                    $('#divCategoryResult').html(data);
                }
            });
        }
    }

    function filtername() {
        if ($("#productname").val() == "") {
            alert("Enter a product name to filter by!");
        }
        else {
            var param = {
                keyword: $('#productname').val()
            };
            $.ajax({
                url: '@Url.Action("Search")',
                type: "POST",
                datatype: "html",
                UpdateTargetId: "divCategoryResult", // The DIV that will contain the partial view
                data: param, // Passing the parameters var
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert("An error has occurred.");
                },
                success: function (data) {
                    $('#divCategoryResult').empty();
                    $('#divCategoryResult').html(data);
                }
            });
        }
    }

    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 1500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val("€" + ui.values[0]);
                $("#amount2").val("€" + ui.values[1]);
            }
        });
        $("#amount").val("€" + $("#slider-range").slider("values", 0));
        $("#amount2").val("€" + $("#slider-range").slider("values", 1));
    });

    function filterprice() {
        if ($("#amount").val() == "") {
            alert("Enter a price amount to filter by!");
        }
        else if ($("#amount2").val() == "") {
            alert("Enter a price amount to filter by!");
        }
        else if (($("amount").val() == "") && ($("#amount2").val() == "")) {
            alert("Enter a price amount to filter by!");
        }
        else {
            var v1 = $("#amount").val();
            var v2 = $("#amount2").val();
            var toRemove = '€';
            var minprice = v1.replace(toRemove, '');
            var maxprice = v2.replace(toRemove, '');
            var param = {
                minPrice: minprice,
                maxPrice: maxprice
            };

            $.ajax({
                url: '@Url.Action("SearchByPrice")',
                type: "POST",
                datatype: "html",
                UpdateTargetId: "divCategoryResult", // The DIV that will contain the partial view
                data: param, // Passing the parameters var
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert("An error has occurred.");
                },
                success: function (data) {
                    $('#divCategoryResult').empty();
                    $('#divCategoryResult').html(data);
                }
            });
        }
    }

    function priceasc() {
        $.ajax({
            url: '@Url.Action("SearchByPriceASC")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult", 
            data: null, 
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    function pricedesc() {
        $.ajax({
            url: '@Url.Action("SearchByPriceDESC")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult", // The DIV that will contain the partial view
            data: null, // Passing the parameters var
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

    function newlylisted() {
        $.ajax({
            url: '@Url.Action("SearchByDateListed")',
            type: "POST",
            datatype: "html",
            UpdateTargetId: "divCategoryResult", // The DIV that will contain the partial view
            data: null, // Passing the parameters var
            error: function (xmlHttpRequest, errorText, thrownError) {
                alert("An error has occurred.");
            },
            success: function (data) {
                $('#divCategoryResult').empty();
                $('#divCategoryResult').html(data);
            }
        });
    }

</script>
<button type="button" onclick="priceasc()">Sort by Lowest Price</button>

<button type="button" onclick="pricedesc()">Sort by Highest Price</button>

<button type="button" onclick="newlylisted()">Sort by Newly Listed</button>

<br /> <br />
@Html.Label("Category: ") <br />
@Html.DropDownListFor(model => model.CategoryID, Model.Categories, "--Select Category--", new { id = "ddlCategories" })
<button type="button" onclick="filtercategory()">Search by Category</button>
<br /> <br />

@Html.Label("Product Name: ") <br />
@Html.TextBox("productname")
<button type="button" onclick="filtername()">Search by Name</button>
<br /> <br />

@Html.Label("Price Range: ") <br />
<input type="text" id="amount" style="border:0; color:#d2def4; font-weight:bold;"/>
<input type="text" id="amount2" style="border:0; color:#d2def4; font-weight: bold;"/>
<div id="slider-range"></div>
<br />
<button type="button" onclick="filterprice()">Search by Price</button>
<br />


<br />
<div id = "divCategoryResult">
</div>
